<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        .aside {
            width: 420px;
        }

        .top-box {
            width: 1200px;
            margin: auto;
        }

        .top-image-box {
            display: block;
            height: 420px;
            border: 1px solid rgba(0,0,0,0.05);
            text-align: center;
        }

        .top-image-box>img {
            height: 100%;
            width: auto;
        }

        .image-box {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
        }

        .image-item {
            width: 60px;
            height: 60px;
            text-align: center;
        }

        .image-item>img {
            width: auto;
            height: 100%;
        }

        .image-item:hover {
            border: 2px solid #000;
        }

        .footer {
            display: flex;
            line-height: 24px;
            margin-top: 30px;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <main>
        <div class="top-box">
            <aside class="aside">
                <a class="top-image-box">
                    <img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/3234234271/O1CN01yh7oMZ1hQAM9iBKqy_!!3234234271.jpg_430x430q90.jpg">
                </a>
                <ul class="image-box">
                    
                </ul>
                <footer class="footer">
                    <span>收藏商品（6345人气）</span>
                    <span>举报</span>
                </footer>
            </aside>
        </div>
    </main>
</body>
<script>
    
    let img = document.querySelector(".top-image-box>img");
    let ul = document.querySelector(".image-box");

    // 二维数组，每一位由小图、大图构成
    let arr = [
        [
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/3234234271/O1CN01yh7oMZ1hQAM9iBKqy_!!3234234271.jpg_60x60q90.jpg",
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/3234234271/O1CN01yh7oMZ1hQAM9iBKqy_!!3234234271.jpg_430x430q90.jpg"
        ],
        [
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/3234234271/O1CN01GWxELG1hQALRLMoT0_!!3234234271.jpg_60x60q90.jpg",
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/3234234271/O1CN01GWxELG1hQALRLMoT0_!!3234234271.jpg_430x430q90.jpg"
        ],
        [
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/3234234271/O1CN01hJrMO71hQALYSlTq3_!!3234234271.jpg_60x60q90.jpg",
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/3234234271/O1CN01hJrMO71hQALYSlTq3_!!3234234271.jpg_430x430q90.jpg"
        ],
        [
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/3234234271/O1CN01W92xzs1hQALYSivo5_!!3234234271.jpg_60x60q90.jpg",
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/3234234271/O1CN01W92xzs1hQALYSivo5_!!3234234271.jpg_430x430q90.jpg"
        ],
        [
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i1/3234234271/O1CN018dxtRq1hQALhzXMS6_!!3234234271.jpg_60x60q90.jpg",
            "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i1/3234234271/O1CN018dxtRq1hQALhzXMS6_!!3234234271.jpg_430x430q90.jpg"
        ],
    ]

    // 通过arr创建由li组成的数组
    let lis = arr.map(v => {
        let li = document.createElement("li");
        li.classList.add("image-item");
        li.addEventListener("mousemove",handleLiMouseover);

        let img = document.createElement("img");
        img.src = v[0];

        li.appendChild(img);
        ul.appendChild(li);
        return li;
    })

    function handleLiMouseover(e) {
        let target = e.currentTarget;
        let index = lis.indexOf(target);
        img.src =  arr[index][1];
    }

    // lis是伪数组对象，内部实现了forEach方法，但是数组的其它迭代方法不可用
    lis.forEach(v => {
        v.addEventListener("mouseover",handleLiMouseover)
    })
</script>
</html>